<template>
  <div class="career">
    <el-backtop :visibility-height="100"></el-backtop>
    <el-row type="flex" class="row-title">
      <img src="@/assets/images/1.png" alt=""/>
      <el-breadcrumb separator-class="el-icon-arrow-right" class="career-route">
        <el-breadcrumb-item class="career-title" :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/career' }">职位列表</el-breadcrumb-item>
      </el-breadcrumb>
      <img src="@/assets/images/2.png" alt=""/>
    </el-row>
    <el-row class="career-query" type="flex">
      <el-card class="box-card" shadow="always">
        <el-form class="form" :model="conditions" ref="queryForm" size="small" :inline="true">
          <el-form-item>
            <el-input v-model="conditions.job_name" placeholder="请输入工作名称" clearable/>
          </el-form-item>
          <el-form-item>
            <el-cascader
                placeholder="请选择工作城市"
                clearable
                :options="city"
                :show-all-levels="false"
                v-model="conditions.job_address"
            ></el-cascader>
          </el-form-item>
          <el-form-item>
            <el-select v-model="conditions.job_education" clearable placeholder="请选择教育程度">
              <el-option v-for="item in degreeOptions" :key="item.value" :label="item.label"
                         :value="item.value" style="width: 220px"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="conditions.job_experience" clearable placeholder="请选择经验要求">
              <el-option v-for="item in experienceOptions" :key="item.value" :label="item.label"
                         :value="item.value" style="width: 220px"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="conditions.job_type" clearable placeholder="请选择招聘类型">
              <el-option v-for="item in typeOptions" :key="item.value" :label="item.label"
                         :value="item.value" style="width: 220px"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input v-model="conditions.job_price_up" placeholder="请输入薪资下限" clearable style="width: 180px"/>
            &nbsp;-&nbsp;
            <el-input v-model="conditions.job_price_down" placeholder="请输入薪资上限" clearable style="width: 180px"/>
          </el-form-item>
          <el-form-item>
            <el-button class="any-button" icon="el-icon-search" type="success" size="small" @click="query" plain>搜索
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-button class="any-button" icon="el-icon-refresh" type="success" size="small" @click="reset" plain>重置
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-row>
    <el-row class="box-contain" type="flex" justify="space-around" v-show="careers.length !== 0">
      <el-skeleton :loading="loading" animated class="box-card-main">
        <template slot="template">
          <div class="box-card-main">
            <el-card class="box-card-main-children" v-for="career in careers" shadow="hover">
              <el-row>
                <el-col class="job-info">
                  <el-row type="flex" justify="space-between">
                    <el-col>
                      <el-skeleton-item variant="text" style="width: 200px; height: 20px"/>
                    </el-col>
                    <el-col style="margin-left: 180px">
                      <el-skeleton-item variant="text" style="width: 50px;height: 20px"/>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col class="company-info">
                  <el-row>
                    <el-col>
                      <el-skeleton-item variant="text" style="width: 50px;height: 15px;"/>
                      <el-skeleton-item variant="text" style="width: 50px;height: 15px;margin-left: 10px"/>
                      <el-skeleton-item variant="text" style="width: 50px;height: 15px;margin-left: 10px"/>
                      <el-skeleton-item variant="text" style="width: 50px;height: 15px;margin-left: 10px"/>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col class="company-bottom">
                  <el-row type="flex">
                    <el-col :span="2">
                      <el-skeleton-item variant="text" style="width: 20px;height: 20px"/>
                    </el-col>
                    <el-col style="font-size: 13.5px">
                      <el-skeleton-item variant="text" style="width: 180px;height: 20px"/>
                    </el-col>
                    <el-col style="font-size: 13.5px" :span="4">
                      <el-skeleton-item variant="text" style="width: 50px;height: 20px"/>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-card>
          </div>
        </template>
        <template>
          <el-card class="box-card-main-children" v-for="career in careers" shadow="hover">
            <el-row>
              <el-col class="job-info">
                <el-row type="flex" justify="space-between">
                  <el-col>
                    <router-link class="link" :to="{name: 'Info', query: {id: career.id}}">{{ career.job_name }} <i
                        class="el-icon-s-comment"></i></router-link>
                  </el-col>
                  <el-col :span="2" style="color: red">{{ career.job_price / 1000 }}k</el-col>
                </el-row>
              </el-col>
              <el-col class="company-info">
                <el-row>
                  <el-col>
                    <el-tag size="mini" type="info">{{ career.job_address }}</el-tag>
                    <el-tag size="mini" type="info" style="margin-left: 10px">{{ career.job_experience }}</el-tag>
                    <el-tag size="mini" type="info" style="margin-left: 10px">{{ career.job_education }}</el-tag>
                    <el-tag size="mini" type="info" style="margin-left: 10px">{{ career.job_type }}</el-tag>
                  </el-col>
                </el-row>
              </el-col>
              <el-col class="company-bottom">
                <el-row type="flex">
                  <el-col :span="2">
                    <el-avatar v-if="career.job_logo === null" icon="el-icon-office-building" shape="square"
                               :size="20"></el-avatar>
                    <el-avatar v-else :src="server + career.logo" shape="square" :size="20"></el-avatar>
                  </el-col>
                  <el-col style="font-size: 13.5px">
                    <router-link class="link" :to="{name: 'Details', query: {name: career.company}}">
                      {{ career.company }}
                      <el-divider direction="vertical"></el-divider>
                      {{ career.principal }}
                    </router-link>
                  </el-col>
                  <el-col style="font-size: 13.5px" :span="4">
                    <el-tag effect="plain" type="info" size="mini">{{ career.job_status }}</el-tag>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-card>
        </template>
      </el-skeleton>
    </el-row>
    <el-row type="flex" justify="center" v-show="careers.length === 0" style="height: 450px">
      <el-empty description="暂无数据"></el-empty>
    </el-row>
    <el-row type="flex" justify="center" style="margin-top: 10px" v-show="careers.length !== 0">
      <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          @current-change="handleCurrentChange"
          :current-page="conditions.currentPage" :page-size="conditions.size">
      </el-pagination>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "Career",
  data() {
    return {
      loading: false,
      server: window.application.minio_host,
      conditions: {
        job_name: '',
        job_price_up: '',
        job_price_down: '',
        job_address: '',
        job_education: '',
        job_experience: '',
        job_type: '',
        size: 12,
        currentPage: 1
      },
      degreeOptions: [{
        value: '硕士',
        label: '硕士'
      }, {
        value: '本科',
        label: '本科'
      }, {
        value: '专科',
        label: '专科'
      }, {
        value: '无要求',
        label: '无要求'
      }],
      experienceOptions: [{
        value: "在校生",
        label: "在校生"
      }, {
        value: "应届生",
        label: "应届生"
      }, {
        value: "经验不限",
        label: "经验不限"
      }, {
        value: "1年以内",
        label: "1年以内"
      }, {
        value: "1-3年",
        label: "1-3年"
      }, {
        value: "3-5年",
        label: "3-5年"
      }, {
        value: "5-10年",
        label: "5-10年"
      }, {
        value: "10年以上",
        label: "10年以上"
      }],
      statusOptions: [{
        value: '招聘中',
        label: '招聘中'
      }, {
        value: '停止招聘',
        label: '停止招聘'
      }],
      typeOptions: [{
        value: '全职',
        label: '全职'
      }, {
        value: '兼职',
        label: '兼职'
      }],
    }
  },
  computed: {
    ...mapGetters(['city', 'careers', 'total'])
  },
  mounted() {
    this.getList()
  },
  methods: {
    Loading() {
      return Loading
    },
    getList() {
      this.loading = true
      if (this.conditions.job_address.length === 2) this.conditions.job_address = this.conditions.job_address[1]
      this.$store.dispatch('career/likeQuery', this.conditions)
          .then((resp) => {
            setTimeout(() => {
              this.loading = false
            }, 1500)
          })
    },
    handleCurrentChange(val) {
      this.conditions.currentPage = val
      this.getList()
    },
    query() {
      this.getList();
    },
    reset() {
      this.conditions = {
        job_name: '',
        job_price_up: '',
        job_price_down: '',
        job_address: '',
        job_education: '',
        job_type: '',
        size: 12,
        currentPage: 1
      }
      this.getList();
    }
  }
}
</script>

<style scoped lang="scss">

.career {
  background: linear-gradient(to bottom, #dfeef1, 1%, white);
}

.row-title {
  height: 130px;
  background-color: #26b2b2;
  justify-content: space-evenly;
}

.career-route {
  line-height: 130px;
}

.el-breadcrumb ::v-deep .el-breadcrumb__inner {
  color: #fdfdfd !important;
}

::v-deep .el-breadcrumb__item {
  font-size: 20px;
}

.career-query {
  width: 1000px;
  align-items: center;
  margin: 30px auto;
}

.form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.any-button {
  width: 120px;
  background-color: #dbecef;
  color: #28b8b8;
  border: none;
}

.any-button:hover {
  color: white;
  background-color: #28b8b8;
}

.any-button:focus {
  color: white;
  background-color: #28b8b8;
}

.box-card {
  border-radius: 35px;
}

.box-card-main {
  width: 1030px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.box-card-main-children {
  margin-bottom: 20px;
  width: 480px;
  border-radius: 20px;
  background: linear-gradient(#f4fafa 100%, #fdfdfd 0%) no-repeat 1px 100px;
  height: 135px;
}

.link {
  text-decoration: none;
  color: black;
}

.link:hover {
  color: #28b8b8;
}

.company-info {
  margin-top: 10px;
}

.company-bottom {
  position: relative;
  top: 16px;
  margin-top: 18px;
}

.box-contain {
  min-height: 340px;
  min-width: 1030px;
}
</style>
